import React, { Component } from 'react'
import { Form, message, Modal } from 'antd'
// import { CommonSelect, CommonInput, CommonFormItem } from 'Form'
// import { popupFormItemLayout } from 'enum'
import _ from 'lodash'
import { getData } from 'util'
import { API_POST_CUSTOMERS_ADD, API_GET_LOCATIONS_CONFIG } from 'ApiMapper'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      // resetList: {}, // 重置下拉框options
      locationConfig: {
        api: API_GET_LOCATIONS_CONFIG,
        searchParams: { code: 1 },
      },
    }
  }

  handleLocationSearch = code => {
    if (code) {
      const searchParams = {
        size: 10,
        code,
      }
      this.setState({
        locationConfig: { api: API_GET_LOCATIONS_CONFIG, searchParams },
      })
    }
  }

  handleSubmit = params => {
    const {
      form: { validateFieldsAndScroll },
      handleCancel,
      refreshTable,
      record,
    } = this.props
    validateFieldsAndScroll((err, values) => {
      if (err) {
        return
      }
      try {
        params = {
          id: record.id,
          sapCusCode: _.trim(values.sapCusCode),
          region: values.region && {
            key: values.region.split('/')[0] || '',
            vaule: values.region.split('/')[1] || '',
          },
          cusType: values.cusType,
        }

        Object.keys(params).forEach(
          key => (params[key] === undefined || params[key] === '') && delete params[key],
        )

        getData({
          api: API_POST_CUSTOMERS_ADD,
          data: params,
        }).then(data => {
          if (data && data.message === 'success') {
            refreshTable()
            handleCancel()

            message.success('提交成功')
          }
        })
      } catch (err) {
        console.error(err)
      }
    })
  }

  render() {
    const { locationConfig } = this.state
    const {
      handleCancel,
      form: { getFieldDecorator },
      record,
    } = this.props
    return (
      <Modal visible title="新增客户" onOk={this.handleSubmit} onCancel={handleCancel}>
        <section>
          <CommonFormItem
            getFieldDecorator={getFieldDecorator}
            label="商品名称"
            decorator="shop_name"
            {...popupFormItemLayout}
          >
            <span>{record.sapCusCode}</span>
          </CommonFormItem>
          <CommonInput
            rules={[{ required: true, message: '客户编号不可为空' }]}
            getFieldDecorator={getFieldDecorator}
            label="客户编号"
            decorator="sapCusCode"
            placeholder="请输入"
            {...popupFormItemLayout}
            initialValue={record.sapCusCode}
          />
          <CommonSelect
            rules={[{ required: true, message: '客户类型不可为空' }]}
            getFieldDecorator={getFieldDecorator}
            label="客户类型"
            decorator="cusType"
            placeholder="请输入"
            list={[{ value: '大宗客户', code: 1001 }, { value: '红旗客户', code: 1002 }]}
            {...popupFormItemLayout}
            initialValue={record.cusType}
          />
          <CommonSelect
            rules={[
              { required: true, message: '供货商不可为空' },
              { whitespace: true, message: '请输入非空白内容' },
            ]}
            getFieldDecorator={getFieldDecorator}
            label="供货商"
            decorator="region"
            placeholder="请选择"
            listConfig={locationConfig}
            listRenderGetValue={item => `${item.code}/${item.name}`}
            listRenderGetLabel={item => `${item.code}/${item.name}`}
            listRenderGetShow={item => `${item.code} ${item.name}`}
            showSearch
            filterOption={false}
            onSearch={this.handleLocationSearch}
            // filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            // mode="combobox"
            {...popupFormItemLayout}
            initialValue={`${record.code}/${record.name}`}
          />
        </section>
      </Modal>
    )
  }
}

export default Form.create()(App)
